<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <ul class="icon-list">
                <li v-for="i in icons" :key="i" @click="onIconChangeHandle(i)" :class="{ 'active': i == obj.iconClass }">
                    <span><i :class="i"></i></span>
                </li>
            </ul>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>大小</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.size" min="0" class="miniinput" type="number" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>颜色</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-color-picker v-model="obj.color" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj, 'color', $event)" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" v-if="obj.textShadow">
                <el-col :span="8" class="editlabel">
                    <span>文字投影</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-tooltip content="水平" placement="top">
                        <input v-model="obj.textShadow.h" type="number" class="miniinput" style="width:37px;" />
                    </el-tooltip>
                    <el-tooltip content="垂直" placement="top">
                        <input v-model="obj.textShadow.v" type="number" class="miniinput" style="width:37px;" />
                    </el-tooltip>
                    <el-tooltip content="模糊" placement="top">
                        <input v-model="obj.textShadow.blur" type="number" class="miniinput" style="width:37px;" />
                    </el-tooltip>
                    <el-color-picker v-model="obj.textShadow.color" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj.textShadow, 'color', $event)" />
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="事件">
            <event-form :obj="obj" />
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "FigureForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function,
    },
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
        EventForm: () => import('../mixin/EventForm.vue'),
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            icons: ["el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user",
                "el-icon-phone", "el-icon-phone-outline", "el-icon-more", "el-icon-more-outline", "el-icon-star-on", "el-icon-star-off",
                "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus",
                "el-icon-success", "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline",
                "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help", "el-icon-help", "el-icon-minus", "el-icon-plus",
                "el-icon-check", "el-icon-close", "el-icon-picture", "el-icon-picture-outline", "el-icon-upload", "el-icon-upload2",
                "el-icon-download", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera", "el-icon-message-solid", "el-icon-bell",
                "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-operation", "el-icon-s-home", "el-icon-s-release",
                "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity",
                "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-share",
                "el-icon-d-caret", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-bottom-left",
                "el-icon-bottom-right", "el-icon-back", "el-icon-right", "el-icon-bottom", "el-icon-top", "el-icon-top-left",
                "el-icon-top-right", "el-icon-arrow-left", "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-up", "el-icon-d-arrow-left",
                "el-icon-d-arrow-right", "el-icon-video-pause", "el-icon-video-play", "el-icon-refresh", "el-icon-refresh-right", "el-icon-refresh-left",
                "el-icon-finished", "el-icon-sort", "el-icon-sort-up", "el-icon-sort-down", "el-icon-rank", "el-icon-loading",
                "el-icon-view", "el-icon-c-scale-to-original", "el-icon-date", "el-icon-edit", "el-icon-edit-outline", "el-icon-folder",
                "el-icon-folder-opened", "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets",
                "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked", "el-icon-document", "el-icon-document-add",
                "el-icon-printer", "el-icon-paperclip", "el-icon-takeaway-box", "el-icon-search", "el-icon-monitor", "el-icon-attract",
                "el-icon-mobile", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset", "el-icon-brush", "el-icon-mouse",
                "el-icon-coordinate",
                "el-icon-magic-stick", "el-icon-reading", "el-icon-data-line", "el-icon-data-board", "el-icon-pie-chart", "el-icon-data-analysis",
                "el-icon-collection-tag", "el-icon-film", "el-icon-suitcase", "el-icon-suitcase-1", "el-icon-receiving", "el-icon-collection",
                "el-icon-files", "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building", "el-icon-school",
                "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking", "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1",
                "el-icon-shopping-cart-2", "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-sold-out", "el-icon-sell", "el-icon-present",
                "el-icon-box", "el-icon-bank-card", "el-icon-money", "el-icon-coin", "el-icon-wallet", "el-icon-discount",
                "el-icon-price-tag", "el-icon-news", "el-icon-guide", "el-icon-male", "el-icon-female", "el-icon-thumb",
                "el-icon-cpu", "el-icon-link", "el-icon-connection", "el-icon-open", "el-icon-turn-off", "el-icon-set-up",
                "el-icon-chat-round", "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square", "el-icon-chat-line-square",
                "el-icon-message", "el-icon-postcard", "el-icon-position", "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification",
                "el-icon-bangzhu", "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim", "el-icon-switch-button",
                "el-icon-full-screen", "el-icon-copy-document", "el-icon-mic", "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal",
                "el-icon-trophy", "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place", "el-icon-location",
                "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location", "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock",
                "el-icon-timer", "el-icon-watch-1", "el-icon-watch", "el-icon-lock", "el-icon-unlock", "el-icon-key",
                "el-icon-service", "el-icon-mobile-phone", "el-icon-bicycle", "el-icon-truck", "el-icon-ship",
                "iconfont icon-dianjizhuansu", "iconfont icon-chaodianyabaojing", "iconfont icon-shengyin_shiti", "iconfont icon-shengyin", "iconfont icon-zhendong", "iconfont icon-wendu",
                "iconfont icon-24gf-square", "iconfont icon-24gf-circle", "iconfont icon-zheng-triangle", "iconfont icon-wubianxing1", "iconfont icon-liubianxing2", "iconfont icon-lingxing",
                "iconfont icon-tixing1", "iconfont icon-24gl-square", "iconfont icon-big-circle", "iconfont icon-xingzhuang-sanjiaoxing", "iconfont icon-pentagon", "iconfont icon-hexagon",
                "iconfont icon-lingxing1", "iconfont icon-tx-tixing", "iconfont icon-gongyezujian-zhishideng", "iconfont icon-gongyede-", "iconfont icon-gongyede-1",
                "iconfont icon-gongyede-3", "iconfont icon-gongyede-4", "iconfont icon-gongyede-6", "iconfont icon-gongyede-7", "iconfont icon-gongyede-8", "iconfont icon-gongyede-9",
                "iconfont icon-gongyede-10", "iconfont icon-gongyede-11", "iconfont icon-gongyede-12", "iconfont icon-gongyede-14", "iconfont icon-gongyede-15", "iconfont icon-gongyede-16",
                "iconfont icon-gongyede-17", "iconfont icon-gongyede-18", "iconfont icon-gongyede-19", "iconfont icon-gongyede-20", "iconfont icon-gongyede-21", "iconfont icon-gongyede-22",
                "iconfont icon-gongyede-23", "iconfont icon-gongyede-24", "iconfont icon-gongyede-25", "iconfont icon-gongyede-26", "iconfont icon-gongyede-2", "iconfont icon-gongyede-5", "iconfont icon-gongyede-13",
            ],
        }
    },
    methods: {
        onIconChangeHandle(i) {
            this.obj.iconClass = i;
        }
    }
}
</script>

<style scoped>
ul.icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border: 1px solid #e6e4e4;
    border-radius: 4px;
}

.icon-list li {
    float: left;
    width: 16.92%;
    text-align: center;
    height: 80px;
    line-height: 80px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #e6e4e4;
    border-bottom: 1px solid #e6e4e4;
    margin-right: -1px;
    margin-bottom: -1px;
    cursor: pointer;
}

.icon-list li span {
    line-height: normal;
    transition: color .15s linear;
    display: inline-block;
    vertical-align: middle;
}

.icon-list li.active i,
.icon-list li:hover i {
    color: #409eff;
}

.icon-list li i {
    display: block;
    font-size: 30px;
    color: #606266;
    transition: color .15s linear;
}
</style>